<template>
	<!-- 待支付 -->
	<layout title="订单详情" background="#fff">
		<view class="order-detail unpay">
			<view class="card">
				<view class="card-title">您的任务还未支付赏金</view>
				<view class="card-subtitle tip" v-if="this.endTime">当前订单将于 <text class="time">{{ hours }}</text>小时<text
						class="time">{{ minutes }}</text>分<text class="time">{{ seconds }}</text>秒后自动取消
				</view>
				<view class="card-desc">赏金猎人将于接取任务后60分钟内完成您发布的任务（特殊任务除）。<view>如果有疑问，可致电0571-8672 1963 （9:00-18:00）</view></view>
				<view class="operation">
					<button class="card-btn plain" @tap="cancelOrder()">取消订单</button>
					<button class="card-btn" @tap="pay">确认支付</button>
				</view>
			</view>

			<view class="card mg-t-30">
				<view class="card-info mg-t-15">
					<view class="card-info-label">任务号:</view>
					<view class="card-info-value">{{ orderInfo.tradeNo || "-" }}
						<image @tap="clip" class="card-icon-copy" :src="getImgSrc('/cuser/icon_copy@2x.png')" />
					</view>
				</view>
				<view class="card-info">
					<view class="card-info-label">预计完成:</view>
					<view class="card-info-value">{{ estimatedTime }}</view>
				</view>
				<view class="card-info">
					<view class="card-info-label">赏金金额:</view>
					<view class="card-info-value"><text>{{ orderInfo.fee }}</text>元
						已优惠<text>{{ orderInfo.coupon || 0 }}</text>元</view>
				</view>
			</view>

			<view class="card detail">
				<view class="detail-title">地点信息</view>
				<view class="detail-address">
					<view class="detail-take">
						<text class="detail-icon">始</text>
						<text>{{ takeAddress }}</text>
					</view>
					<view class="detail-receive">
						<text class="detail-icon">终</text>
						<text>{{ receiveAddress }}</text>
					</view>
				</view>
				<view class="detail-info">
					<view class="detail-category">
						<view>任务类型：{{ (orderInfo.goodsTypeList || []).join("、") }}</view>
						<view>难度系数/kg：{{ orderInfo.weight || 0 }}kg</view>
						<view>备注：{{ orderInfo.remark }}</view>
					</view>
				</view>
			</view>
		</view>
	</layout>
</template>
<script>
	import moment from "moment";
	moment.locale("zh-cn"); //汉化
	export default {
		props: {
			latitude: {
				type: Number,
			},
			longitude: {
				type: Number,
			},
			orderId: {
				type: String,
			},
			orderInfo: {
				type: Object,
			},
			takeAddress: {
				type: String,
			},
			receiveAddress: {
				type: String,
			},
		},
		data() {
			return {
				$countdown: null,
				endTime: "",
				//倒计时内容
				hours: 0,
				minutes: 0,
				seconds: 0,
				// time: "",
			};
		},
		onShow() {},
		watch: {},
		computed: {
			estimatedTime() {
				const time = this.orderInfo.requestedTime;
				if(!time) return '-';
				try {
					return moment(time.replace(/-/, '/')).add(1, 'hour').format('YYYY-MM-DD HH:mm:ss')
				}catch(err) {
					return time
				}
			}
		},
		created() {
			const _this = this;
			console.log(this.latitude, this.longitude);
			this.$u.api
				.queryOrderDetail({
					tradeNo: this.orderId,
					lat: this.latitude,
					lon: this.longitude,
				})
				.then((res) => {
					if (!res.data) {
						uni.showToast({
							title: "获取订单信息失败",
							icon: "error",
						});
						return;
					}
					this.endTime = +new Date(res.data.closeTime.replace(/-/g, "/"));
					if (this.endTime < Date.now()) {
						this.endTime = Date.now();
					}
					this.countdown();
				});
			this.$bridge.registerHandler(
				"triggerToAfterPay",
				(data, responseCallback) => {
					responseCallback(data);
					_this.$emit("onRefresh");
				}
			);
		},
		methods: {
			async pay() {
				// 支付订单
				const orderId = this.orderInfo.tradeNo;
				if (!orderId) {
					uni.showToast({
						title: "无效任务号",
						icon: "none"
					});
					return;
				}
				const res = await this.$u.api.appOrderPay({
					orderId
				});
				if (!res || res.code !== 200) {
					uni.showToast({
						title: res.message || "操作失败",
						icon: "none"
					});
					return;
				}
				this.$bridge.callHandler(
					"triggerToPay",
					JSON.stringify(res.data),
					(args) => {}
				);
			},
			clip() {
				uni.setClipboardData({
					data: this.orderInfo.tradeNo,
					showToast: true,
				});
			},
			cancelOrder() {
				const self = this;
				uni.showModal({
					content: "是否确认取消订单",
					success: (res) => {
						if (res.confirm) {
							self.$u.api
								.invokeCancelOrder({
									tradeNo: self.orderId
								})
								.then((res) => {
									if (res.code === 200) {
										uni.showToast({
											title: "取消成功"
										});
										self.$emit("onRefresh");
									}
								});
						} else {}
					},
				});
			},
			countdown() {
				let currentTime = moment(Date.now());
				let endTime = moment(this.endTime);
				const overTime = endTime.diff(currentTime) / 1000;
				const time = moment.duration(overTime, "seconds");
				this.hours = time.hours();
				this.minutes = time.minutes();
				this.seconds = time.seconds();

				this.$countdown = setInterval(() => {
					let currentTime = moment(Date.now());
					let endTime = moment(this.endTime);
					const overTime = endTime.diff(currentTime) / 1000;
					const time = moment.duration(overTime, "seconds");
					if (overTime < 1) {
						clearInterval(this.$countdown);
						setTimeout(() => {
							this.$emit("onRefresh");
						}, 1000);
						return;
					}
					this.hours = time.hours();
					this.seconds = Math.max(time.seconds(), 0);
					this.minutes = time.minutes();
				}, 1000);
			},
		},
		beforeDestroy() {
			if (this.$countdown) clearInterval(this.$countdown);
		},
	};
</script>
<style lang="scss" scoped>
	@import "./index.scss";

	.unpay {
		padding-top: 30rpx;
		padding-bottom: 45rpx;

		.detail {
			// margin-top: 30rpx;
			padding: 36rpx 0 45rpx 0;

			&-address {
				padding-top: 46rpx;
				padding-left: 40rpx;
			}

			&-category {
				padding-left: 40rpx;
			}
		}

		.tip {
			margin: 23rpx auto 57rpx;
		}

		.card-title {
			padding-top: 30rpx;
		}

		.operation {
			margin: 50rpx auto 10rpx;
			display: flex;
			width: 100%;
			justify-content: space-between;
		}
	}
</style>
